import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '../views/Index.vue'; // 引入 Home 组件

Vue.use(VueRouter);

const routes = [
  {
    // 重定向，用来指向一打开网页就跳转到哪个路由
    path: '/',
    redirect: '/main',
  },
  {
    // 首页
    path: '/main',
    name: 'Main',
    component: () => import('../views/Main.vue'),
    children: [// 开始嵌套路由，这下面的所有路由都是Main路由的子路由
      {
        path: '/', // 嵌套路由里默认是哪个网页
        redirect: '/index',
      },
      {
        path: '/index', // 路由的路径【展示在地址栏上的内容】
        name: 'Index', // 路由的名称【对当前路由的命名，在跳转路由时，可以使用这个属性来跳转到指定的路由】
        component: Index, // 路由的组件【当前路由展示的组件，组件有两种引入方式，第一种直接在文件的开头引入】
      },
      {
        path: '/setting', // 设置页面的路由
        name: 'Setting',
        // 路由的组件【当前路由展示的组件，组件有两种引入方式，第二种 在componets属性中引入，这里的import也是ES6引入的语法】
        component: () => import('../views/Setting.vue'),
      },
      {
        path: '/about', // 路由的路径
        name: 'About', // 路由的名称
        // 路由的组件【当前路由展示的组件，组件有两种引入方式，第二种 在componets属性中引入，这里的import也是ES6引入的语法】
        component: () => import('../views/About.vue'),
      },
      {
        path: '/element', // 路由的路径
        name: 'Element', // 路由的名称
        // 路由的组件【当前路由展示的组件，组件有两种引入方式，第二种 在componets属性中引入，这里的import也是ES6引入的语法】
        component: () => import('../views/Element.vue'),
      },
      {
        path: '/axios', // 路由的路径
        name: 'Axios', // 路由的名称
        // 路由的组件【当前路由展示的组件，组件有两种引入方式，第二种 在componets属性中引入，这里的import也是ES6引入的语法】
        component: () => import('../views/Axios.vue'),
      },
    ],
  },
  {
    path: '/*', // 注意，这里不是嵌套理由了，这是为了设置404页面，一定要放在最后面，这样当服务器找不到页面的时候就会返回404
    name: '404',
    component: () => import('../views/error/404.vue'),
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;
